<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Appliance History</title>
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
		<script src="/film/js/jquery.js"></script>
	    <script src="/film/bootstrap/js/bootstrap.min.js"></script>
	    <script src="/film/bootstrap/js/typeahead.js"></script>
	    <style>
	      	body {
	        	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	      	}
	    </style>
	</head>
	<body>
		<jsp:include page="navigationBar.jsp"/>
		<div class="container">
			 <div class="content-container">
			 	<h4>My job applications</h4>
				<c:forEach var="a" items="${applications}">
					<!--${a.jobposting.project.projectName}, ${a.jobposting.type}, ${a.applier.name}, ${a.applier.surname}-->
					<div id="applications" class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#${a.jobposting.id}">
							<h4 style="display:inline">Application to ${a.jobposting.project.projectName}
														for ${a.jobposting.type} position</h4>
							<span class="label label-info pull-right">Status: ${a.status} </span></a>
						</div>	
						<div id="${a.jobposting.id}" class="accordion-body collapse">
							<div class="accordion-inner">
								<table width=100%>
									<c:set var="frontCam" value="${a.jobposting.type == 'actor' or a.jobposting.type == 'actress' or a.jobposting.type == 'dublour'}"/>
									<c:if test="${frontCam == true}">
										<tr>
											<td>Description:</td>
											<td>
												${a.jobposting.description}
											</td>
										</tr>
							 			<tr>
											<td>Height:</td>
											<td>
												${a.jobposting.minHeight} - ${a.jobposting.maxHeight} cm
											</td>
										</tr>
										<tr>
											<td>Weight:</td>
											<td>
												${a.jobposting.minWeight} - ${a.jobposting.maxWeight} kg
											</td>
										</tr>
		
										<tr>
											<td>Hair Color:</td>
											<td>
												${a.jobposting.hairColor}
											</td>
										</tr>
										<tr>
											<td>Eye Color:</td>
											<td>
												${a.jobposting.eyeColor}
											</td>
										</tr>
							 		</c:if>
							 		<c:if test="${frontCam == false }">
							 			<tr>
											<td>Qualifications:</td>
											<td>
												${a.jobposting.qualifications}
											</td>
										</tr>
									</c:if>
								</table>
							</div>
						</div>
					</div>
					<br/>
				</c:forEach>
				<h4>My equipment offerings</h4>
				<c:forEach var="o" items="${offerings}">
					<!--${a.jobposting.project.projectName}, ${a.jobposting.type}, ${a.applier.name}, ${a.applier.surname}-->
					<div id="oferrings" class="accordion-group">
						<div class="accordion-heading">
							<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#${o.equipmentPosting.id}">
							<h4 style="display:inline">Offering ${o.description}
														for ${o.equipmentPosting.project.projectName} project</h4>
							<span class="label label-info pull-right">Status: ${o.status} </span></a>
						</div>	
						<div id="${o.equipmentPosting.id}" class="accordion-body collapse">
							<div class="accordion-inner">
								<table width=100%>							
									<tr>
										<td>Description:</td>
										<td>
											${o.equipmentPosting.description}
										</td>
									</tr>
		
						 			<tr>
										<td>Qualifications:</td>
										<td>
											${o.equipmentPosting.specifications}
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<br/>
				</c:forEach>
			</div>
		</div>
	</body>
	
	<script src="/film/js/commonScripts.js"></script>
</html>